<script setup>
class MeasurementTool {
  constructor(viewer) {
    this.viewer = viewer;
    this.activeTool = null;
    this.measurements = [];
  }

  startDistanceMeasurement() {
    this.clear();
    this.activeTool = measureDistance(this.viewer);
  }

  startAreaMeasurement() {
    this.clear();
    this.activeTool = measureArea(this.viewer);
  }

  startHeightMeasurement() {
    this.clear();
    this.activeTool = measureHeight(this.viewer);
  }

  clear() {
    if (this.activeTool) {
      this.activeTool.destroy();
      this.activeTool = null;
    }
    this.measurements.forEach(measurement => {
      if (measurement.destroy) measurement.destroy();
    });
    this.measurements = [];
  }
}

// 使用示例
const measurementTool = new MeasurementTool(viewer);

// 开始距离测量
document.getElementById('measure-distance').addEventListener('click', () => {
  measurementTool.startDistanceMeasurement();
});

// 开始面积测量
document.getElementById('measure-area').addEventListener('click', () => {
  measurementTool.startAreaMeasurement();
});

// 清除测量
document.getElementById('clear-measurements').addEventListener('click', () => {
  measurementTool.clear();
});

</script>
<template>
    <el-dropdown placement="top-start">
      <el-button> 测量工具 </el-button>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item @click="startDistanceMeasurement">面积测量</el-dropdown-item>
          <el-dropdown-item @click="startAreaMeasurement">距离测量</el-dropdown-item>
          <el-dropdown-item @click="startHeightMeasurement">高度测量</el-dropdown-item>
          <el-dropdown-item @click="clear-measurements">清楚</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
</template>
<style >

</style>
